<template>
	<div class="drawbox flexcolumn">
		<div class="flexcolumn gginner">
			<div style="margin:20rpx 0 10rpx 0" class="c_000 f16 textcenter mt_10 mb_25">做任务赢取抽奖次数</div>
			<!-- 图片 -->
			<div v-if="advert.data.adv_type == 1 || advert.data.adv_type == 2" class="drawimg flexcenter">
				<div class="tips">广告</div>
				<img :src="advert.data ? domain + advert.data.url : ''" alt="" @click.stop="handleTask" />
			</div>
			<!-- 视频
			<VideoAdv v-else id='advvideo' :url='advert.data.url' /> -->
			<!-- <div v-else class="drawimg flexcenter">
        <div class="tips">广告</div>
        <video
          v-if="advert.data.url"
          autoplay="autoplay"
          :webkit-playsinline='true'
          :playsinline='true'
          :controls='false'
          muted="muted"
          :src="domain + advert.data.url"
          height="5.3rem"
        ></video>
      </div> -->
			<div class="flexbetween">
				<div v-if="advert.data.is_force != 1"
					class="flexcenter detailbtn detailbtn3 mauto mt_24 mb_10 c_fff f16" @click.stop="closePop">
					返回抽奖
				</div>
				<template v-if="advert.data.adv_type == 3">
					<!--  -->
					<div v-if="disableval" class="flexcenter detailbtn detailbtn3 mauto mt_24 mb_10 c_fff f14">
						{{ djs_time }} s后再抽一次
					</div>
					<div v-else class="flexcenter detailbtn detailbtn3 mauto mt_24 mb_10 c_fff f16"
						@click.stop="closePop">再抽一次</div>
				</template>
				<template v-else>
					<div class="flexcenter detailbtn detailbtn3 mauto mt_24 mb_10 c_fff f16"
						@click.stop="handleTask(1)">
						做任务
					</div>
				</template>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		isExternal
	} from "@/utils/validate";
	import {
		advertRecord
	} from "@/api/task";

	export default {
		data() {
			return {
				djs_time: 0,
				disableval: false,
			};
		},
		components: {

		},
		props: {
			type: {
				default: 4,
			},
			advert: {
				default: null,
			},
		},
		created() {
			console.log('11111', this.advert)
			if (this.advert.data.adv_type == 3) {
				console.log('2222', this.advert.data.is_limit)
				if (this.advert.data.is_limit == 1) {
					this.disableval = true;
					this.djs_time = this.advert.data.time;
					console.log('3333', this.disableval)
					this.djsSetTime()
				} else {
					console.log('4444', this.advert.data.is_limit)
					this.disableval = false;
				}
				if (this.advert.data.is_force != 1) {
					console.log('555', this.advert.data.is_limit)
					this.handleTask()
				}
			}
		},
		methods: {
			// 关注公众号
			goGzh() {},

			handleTask(type) {
				let task = JSON.parse(sessionStorage.getItem("taskInfo")).task;
				if (this.advert.data) {
					advertRecord({
						id: task.id
					});
					if (type == 1) this.goLink();
				}
			},

			// 观看视频15秒倒计时
			djsSetTime() {
				this.djs_timer = setInterval(() => {
					this.djs_time--;
					// console.log('this.djs_time:',this.djs_time)
					if (this.djs_time < 1) {
						clearInterval(this.djs_timer);
						this.disableval = false;
						this.handleTask()
						// postBuriedPointRecord(4, this.type, 13, this.time, this.record_id);
					}
				}, 1000);
			},

			goLink() {
				let link = this.advert.data.link;
				if (!link) return;
				if (!isExternal(link)) {
					this.$toast("无效链接");
					return;
				}
				location.href = link;
			},

			// copylink() {
			//   let link = window.location.href;
			//   this.$copyText(link).then(
			//     () => {
			//       let task = JSON.parse(sessionStorage.getItem("taskInfo")).task;
			//       forwardRecord({ id: task.id })
			//       this.closePop()
			//       this.$toast("链接复制成功，请到微信上粘贴");
			//     },
			//     () => {
			//       this.$toast("复制失败，请重新点击");
			//     }
			//   );
			// },

			closePop() {
				this.$emit("close");
			},
		},
	};
</script>

<style lang="scss" scoped>
	.drawbox {
		width: 60vw;
		margin: 400rpx auto;
		font-size: 26rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.gginner {
		background-color: white;
		border-radius: 10rpx;
		padding: 10rpx;
	}

	.drawimg {
		width: 60vw;
		height: 260rpx;
		// max-height: 6.8rem;
		margin: auto;
		position: relative;
		background-color: #eee;
		border-radius: 10rpx;
		overflow: hidden;

		img {
			width: 100%;
			height: 100%;
		}
	}

	.title {
		color: #76b9fe;
		margin: 20rpx auto;
	}

	.detailbtn {

		width: 150rpx;
		height: 50rpx;
		border-radius: 8rpx;
		background: linear-gradient(142deg, #EFB565 0%, #D83626 100%);
		border: 1px solid #fff;
		// background-color: #76B9FE;
		// border: 1px solid #007CFF;
	}

	.detailbtn2 {
		width: 140rpx;
		height: 60rpx;
	}

	.mauto {
		margin: 20rpx auto;
	}

	.detailbtn3 {
		flex: 1;
		margin: 15rpx 25rpx;

	}

	.tips {
		position: absolute;
		top: 10rpx;
		right: 10rpx;
		padding: 50rpx 120rpx;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 9;
		font-size: 28rpx;
		color: white;
		border-radius: 12rpx;
	}
</style>